import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzUploadFile } from 'ng-zorro-antd/upload';
import { Observable } from 'rxjs';
import { TemplateService } from 'src/app/common/providers';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.less'],
})
export class EditComponent implements OnInit {
  // 表单提交时发出的提交事件，参数为 create / update
  @Output() appSubmited = new EventEmitter<string>();
  // 控制对话框显示和隐藏
  showEdit = false;
  // 响应式表单
  validateForm: FormGroup;
  // 控制保存按钮的加载状态
  hasClicked = false;
  // 上传文件列表
  fileList: NzUploadFile[] = [];
  // 上传文件前置钩子，可用于阻止自动上传
  beforeUpload: (
    file: NzUploadFile,
    fileList: NzUploadFile[]
  ) => boolean | Observable<boolean>;

  constructor(private fb: FormBuilder, private templateServ: TemplateService) {
    // 构建响应式表单
    this.validateForm = this.fb.group({
      id: [null],
      title: [null, Validators.required],
      content: [null, Validators.required],
      createUser: this.fb.group({
        id: [null, Validators.required],
      }),
      imageUrl: [null],
      isRead: [null],
    });
    // upload 组件上传前钩子
    this.beforeUpload = (file, fileList) => {
      this.fileList = [file];
      // 返回 false 则阻止自动上传
      return false;
    };
  }

  ngOnInit(): void {}

  /**
   * 显示对话框，并初始化组件数据
   * @param data 编辑数据
   */
  show(data?: any): void {
    if (data) {
      // 编辑
      this.validateForm.patchValue(data);
    } else {
      // 新增，可对表单做初始化处理
      // 设置是否已读状态
      this.validateForm.get('isRead').setValue(true);
    }
    this.showEdit = true;
  }

  /**
   * 关闭对话框，并重置组件内数据
   */
  close(): void {
    // reset 方法会将表单所有数据设为 null
    this.validateForm.reset();
    this.showEdit = false;
    this.hasClicked = false;
  }

  /**
   * 提交保存
   */
  submit(): void {
    this.hasClicked = true;
    if (this.validateForm.valid) {
      this.templateServ.saveMessage(this.validateForm.value).subscribe({
        // 请求成功，处理结果
        next: (res) => {
          this.hasClicked = false;
          if (res.success) {
            // 根据表单 ID 判断当前是新增数据或修改数据
            if (this.validateForm.get('id').value) {
              // 修改数据
              this.appSubmited.emit('update');
            } else {
              // 新增数据
              this.appSubmited.emit('create');
            }
            // 关闭对话框
            this.close();
          }
        },
        // 请求失败，可以进行相应提示，但 http 拦截器已做统一 http 异常处理
        // 如需对错误结果特殊处理，可在此添加逻辑，否则可以省略
        error: (err) => {
          this.hasClicked = false;
        },
        // 请求完成执行
        complete: () => {},
      });
    } else {
      this.hasClicked = false;
    }
  }
}
